<template>
	<view class="details">
		<view class="ul" v-if="initData != null">
			<view><image :src="shippperOrderVo.image" mode="widthFix" class="img" /></view>
			<view>
				<text class="text">订单号：</text>
				{{ shippperOrderVo.orderSn }}
			</view>
			<view>
				<text class="text">订单识别码：</text>
				{{ ordervo.identificationCode  }}
			</view>
			<view>
				<text class="text">商品货号：</text>
				{{ shippperOrderVo.commodityCode }}
			</view>
			<view>
				<text class="text">商品名称：</text>
				{{ shippperOrderVo.goodsName }}
			</view>
			<view>
				<text class="text">供应商信息：</text>
				{{ shippperOrderVo.supplierName }}
			</view>
			<view>
				<text class="text">数量：</text>
				1件
			</view>
			<view>
				<text class="text">客户名称：</text>
				{{ ordervo.contactUser }}
			</view>
			<view>
				<text class="text">联系电话：</text>
				{{ ordervo.contactPhone }}
			</view>
			<view v-if="shippperOrderVo.orderFrom">
				<text class="text">订单来源：</text>
				{{ shippperOrderVo.orderFrom.desp }}
			</view>
			<view>
				<text class="text">下单时间：</text>
				{{ shippperOrderVo.createdTime }}
			</view>
			<view>
				<text class="text">审核时间：</text>
				{{ shippperOrderVo.auditTime }}
			</view>
			<view>
				<text class="text">身高：</text>
				{{ ordervo.height }}
			</view>
			<view>
				<text class="text">体重：</text>
				{{ ordervo.weight }}
			</view>
			<view v-for="(item1, index1) in shippperOrderVo.sku" :key="index1">
				<text class="text">{{ item1 }}</text>
			</view>
			<view>
				<text class="text">下单人：</text>
				{{ ordervo.placeOrderPerson }}
			</view>
			<view>
				<text class="text">所属代理：</text>
				{{ ordervo.agentname }}
			</view>
			<view>
				<text class="text">收货地址：</text>
				{{ expressVo.province }} {{ expressVo.city }} {{ expressVo.region }}{{ expressVo.addrDetail }}
			</view>
			<view>
				<text class="text">快递单号：</text>
				<input v-model="ordervo.expressSn" />
			</view>
			<view class="import" v-if="shippperOrderVo.productStatusEnum">
				<text class="text">商品状态：</text>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{ array[index] }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<!-- 内部换货 -->
			<view v-if="index == 5">
				<text class="text">更换颜色：</text>
				<input v-model="ordervo.chagsku1" />
			</view>
			<view v-if="index == 5">
				<text class="text">更换尺码：</text>
				<input v-model="ordervo.chagsku2" />
			</view>
			<!-- 待货 -->
			<view class="import" v-if="index == 1">
				<text class="text">待货天数：</text>
				<picker @change="bindPickerTimeChange" :value="indextime" :range="timelist">
					<view class="uni-input">{{ timelist[indextime] }}</view>
				</picker>
			</view>
			<!-- 有现货 -->
			<view class="scanadd import" v-if="index == 2">
				<text class="text">商品码：</text>
				<input type="text" v-model="ordervo.goodsSn" />
				<view class="scan">扫描商品码</view>
			</view>
			<view class="scanadd import" v-if="index == 2">
				<text class="text">快递单号：</text>
				<input type="text" v-model="ordervo.expressSn" />
				<view class="scan">扫描单号</view>
			</view>
			<view>
				<text class="text">仓库：</text>
				{{ ordervo.depotName }}
			</view>
			<view>
				<text class="text">客服名称：</text>
				{{ initData.customerName }}
			</view>
			<view>
				<text class="text">发货员：</text>
				{{ shippperOrderVo.supplierName }}
			</view>
			<view>
				<text class="text" v-if="initData.shipTime == ''">发货时间：</text>
				{{ shippperOrderVo.shipTime }}
			</view>
			<view>
				<text class="text">操作时间：</text>
				{{ shippperOrderVo.operationTime }}
			</view>
			<view>
				<text class="text">备注：</text>
				{{ ordervo.remark }}
			</view>
			<view>
				<text class="text">客服备注：</text>
				{{ ordervo.customerRemark }}
			</view>
		</view>
		<view class="button">保 存</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import shipments from '../../servers/shipments/shipments.js';
export default {
	components: { uniIcons },
	data() {
		return {
			initData: '',
			id: '',
			array: ['待定', '待货', '有现货', '需外采', '断货', '内部换货'],
			frontOrderStatus: '',
			shippperOrderVo: '',
			ordervo: '',
			expressVo: '',
			index: 0,
			timelist: [1, 2, 3, 4, 5, 6, 7],
			time: 0,
			indextime: 0,
			is_go_top: false
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	mounted() {
		console.log(12321321321);
		var _this = this
		uni.getStorage({
		    key: 'shipmentsalterdetails',
		    success: function (res) {
		        _this.id = res.data;
				var obj = { orderId: _this.id };
				_this.getDate(obj);
		    }
		});
	},
	methods: {
		bindPickerChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		timeChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.time = e.target.value;
		},
		// 计算距离顶部的高度，均分10等分，
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		getData(obj) {
			shipments
				.newDetails(obj)
				.then(res => {
					this.initData = res.data;
					this.shippperOrderVo = res.data.shippperOrderVo;
					this.ordervo = res.data.ordervo;
					this.expressVo = res.data.expressVo;
					this.shippperOrderVo.image = this.imgCDNUrl + this.shippperOrderVo.image;
					var sku = [];
					if (this.shippperOrderVo.productSkuDesp) {
						sku = this.shippperOrderVo.productSkuDesp.split(',');
					}
					var chagsku = [];
					if (this.shippperOrderVo.changProductSkuDesp) {
						chagsku = this.shippperOrderVo.changProductSkuDesp.split(',');
					}
					this.shippperOrderVo.sku = sku;
					this.shippperOrderVo.chagsku = chagsku;
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		save() {
			var chgProductSkuDesp = '';
			if (order.chagsku1 != '') {
				chgProductSkuDesp = '更换颜色：' + order.chagsku1;
				if (order.chagsku2 != '') {
					chgProductSkuDesp = chgProductSkuDesp + ',更换尺码:' + order.chagsku2;
				}
			}
			if (order.chagsku1 == '') {
				if (order.chagsku2 != '') {
					chgProductSkuDesp = '更换尺码:' + order.chagsku2;
				}
			}
			/* 商品状态值 */
			var obj = {
				chgProductSkuDesp: chgProductSkuDesp,
				expressSn: ordervo.expressSn,
				orderId: this.id,
				productStatus: this.index + 1,
				waitDay: this.indextime + 1
			};
			shipments
				.save(obj)
				.then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: './unfinished'
						});
					}
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		}
	}
};
</script>
<style lang="less" scoped>
page {
	background: #ffffff;
}
.details {
	.img {
		width: 100%;
		border: 1px solid #efeff4;
	}
	.ul {
		line-height: 72rpx;
		font-size: 24rpx;
		color: #999999;
		padding: 20rpx;
		view {
			position: relative;
			display: flex;
			flex-direction: row;
			.text {
				display: inline-block;
				width: 180rpx;
				text-align-last: justify;
				color: #333;
			}
		}
		.import {
			line-height: 80rpx;
			input,
			picker {
				font-size: 26rpx;
				width: 557rpx;
				height: 70rpx;
				line-height: 70rpx;
				border: 1px solid #e1e1e1;
				border-radius: 10rpx;
				padding: 0 27rpx;
				box-sizing: border-box;
				margin: 5rpx 0;
				background: #ffffff;
			}
			.uni-arrowdown {
				position: absolute;
				right: 0;
				top: 0rpx;
				width: 50rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				pointer-events: none;
			}
		}
		.scanadd {
			input {
				width: 362rpx;
			}
			.scan {
				width: 168rpx;
				color: #fff;
				font-size: 24rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #bd3c8c;
				text-align: center;
				border-radius: 10rpx;
				display: block;
				margin-left: 20rpx;
			}
		}
	}
}
.msg {
	padding: 20rpx;
	border-top: 26rpx solid #f6f6f6;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		font-size: 26rpx;
		text {
			font-size: 28rpx;
			width: 180rpx;
			text-align-last: justify;
		}
		.remark {
			display: inline-block;
			width: 520rpx;
			word-wrap: break-word;
			line-height: 50rpx;
		}
	}
	.button {
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		view {
			width: 208rpx;
			line-height: 74rpx;
			border-radius: 37rpx;
			text-align: center;
			font-size: 28rpx;
			margin-right: 45rpx;
		}
		.accept {
			color: #fff;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}
		.reject {
			color: #bd3c8c;
			border: 1px solid #bd3c8c;
		}
		.rejects {
			margin-right: 0;
			color: #666666;
			border: 1px solid #e1e1e1;
		}
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}
</style>
